import React from 'react';
import {StyleSheet, Dimensions} from 'react-native';
import MapView, {Marker} from '@react-native-oh-tpl/react-native-maps';

const {width, height} = Dimensions.get('window');
const ASPECT_RATIO = width / height;
// 武汉的经纬度
const LATITUDE = 30.5928;
const LONGITUDE = 114.3055;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

const App = () => {
  return (
    <MapView
      style={styles.map}
      showsBuildings
      showsUserLocation
      showsMyLocationButton
      initialRegion={{
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      }}>
      <Marker
        coordinate={{
          latitude: LATITUDE,
          longitude: LONGITUDE,
        }}
        title="武汉"
        description="武汉是湖北省省会，是一座历史文化名城。"
        draggable
      />
    </MapView>
  );
};

const styles = StyleSheet.create({
  map: {
    width: '100%',
    height: '100%',
  },
});

export default App;
